<template>
    <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" :options="config" />
    <div class="formContainer">
        <h3>重置密码</h3>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="ruleForm.newPassword" type="newPassword" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认重置
                </el-button>
            </el-form-item>

        </el-form>
    </div>
</template>
<script setup>
import { useUserStore } from '../store/useUserStore'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { loadFull } from "tsparticles";

import { config } from '../util/config'
import { ElMessage } from 'element-plus'
import axios from 'axios';

//粒子配置

const particlesLoaded = async container => {

};

const { changeUser } = useUserStore()
const router = useRouter();

//ref 获取表单对象
const ruleFormRef = ref();
const ruleForm = reactive({
    username: "",
    newPassword: ""
})

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
    ]
})
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            const res = await axios.post(`/adminapi/users/forgetPwd/resetPwd`, ruleForm)
            let { code, data } = res.data
            if (code === 0) {
                alert("修改成功，请用新密码登录")
                router.push("/login")
            } else {
                ElMessage.error(res.data.msg)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>
<style lang="scss" scoped>
.formContainer {
    width: 500px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-shadow: 2px 2px 5px black;
    text-align: center;
    z-index: 100;

    .ruleForm {
        margin-top: 50px;
    }

    h3 {
        font-size: 40px;
    }

    :deep(.el-form-item__label) {
        color: white;
        font-size: 16px;
        font-weight: 700;
    }
}
</style>